<template>
  <div @touchmove.prevent @touchmove.stop class="container box box-ac box-jc">
    <div class="popup animated zoomIn">
      <div class="close box box-ver box-ac">
        <div @click="$emit('close')" class="icon icon-close-round"></div>
        <div class="line box-f1"></div>
      </div>
      <div class="title box box-ac box-jc">
        <div class="icon icon-popup-tips"></div>
      </div>
      <div class="content">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'popup',
  data () {
    return {
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.container{
  position: absolute;
  z-index: 88;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.7);
}
.icon-popup-tips{
  width:.6rem;
  height:.6rem;
  @include bg-image('../assets/images/icon-popup-tips');
}
.icon-close-round{
  width:.7rem;
  height:.7rem;
  @include bg-image('../assets/images/icon-close-round');
}
.close{
  position:absolute;
  top:-1.8rem;
  height:1.8rem;
  right:0.3rem;
  width:.6rem;
  .line{
    border-right:1px dashed #FFF;
  }
}
.popup{
  width:5.8rem;
  // overflow: hidden;
  position:absolute;
  .title{
    height:1.1rem;
    background-color:$themeColor;
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
  }
  .content{
    background-color:#FFF;
    padding:.3rem;
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    color:#666;
    line-height:.4rem;
    font-size:.28rem;
  }
}
</style>
